<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user"
import { ref, onMounted } from "vue"
import VueQrcode from "vue-qrcode"
// import {getUUID} from '@/api/qyyjt/index'
import qyyjt from "./components/qyyjt.vue"

const userStore = useUserStore()
// const qrcode_value = ref("https://cdn.finchina.com/app/h5/app_scan_no_installs/install.html?uuid=")
// const changeValue = () => {
//   qrcode_value.value = "https://qyyjt.cn"
// }
const userInfo = ref({
  username: "",
  nickname: "",
  avatar: "",
  isVIP: false,
  level: 0,
  hasQUser: false,
  // qUserNickname: "",
  // qUserPhone: "",
  _id: ""
})
// const qrcode_uuid = ref("")
// /** 绑定企业预警通账号 */
// const bindQUser = async () => {
//   let resp = await getUUID()
//   qrcode_uuid.value = resp.data.data
// }
// const qrcode_value = computed(() => {
//   return "https://cdn.finchina.com/app/h5/app_scan_no_installs/install.html?uuid=" + qrcode_uuid.value
// })
/** 获取用户详情 */
onMounted(() => {
  userInfo.value = userStore.userDetail
})
</script>

<template>
  <div class="layout-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span style="font-weight: bold">个人信息</span>
        </div>
      </template>
      <!-- <p v-for="o in 4" :key="o" class="text item">{{ "List item " + o }}</p> -->
      <el-form :model="userInfo" class="userinfo" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userInfo.nickname" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="会员情况">
          <el-input v-model="userInfo.isVIP?'是':'否'" disabled ></el-input>
        </el-form-item> -->
      </el-form>
    </el-card>
    <!-- {{ userStore.username }} -->
    <el-card style="margin-top: 15px">
      <template #header>
        <span style="font-weight: bold"
          >企业预警通账户信息
          <span v-if="userInfo.hasQUser">(已绑定)</span>
          <span v-else>(未绑定)</span>
        </span>
      </template>
      <qyyjt></qyyjt>
      <!-- <span>企业预警通昵称：{{ userInfo.qUserNickname }}</span> -->
      <!-- <template v-if="!!userInfo.qUserNickname">
        <el-form :model="userInfo" class="userinfo" label-width="auto">
          <el-form-item label="账户昵称">
            <el-input disabled v-model="userInfo.qUserNickname"></el-input>
          </el-form-item>
          <el-form-item label="账户手机号">
            <el-input disabled v-model="userInfo.qUserPhone"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <div class="qrcode" v-if="qrcode_uuid">
          <VueQrcode :value="qrcode_value" ></VueQrcode>
        </div>
        <div class="qrcode" v-else>
          <el-button type="primary" @click="bindQUser">绑定企业预警通账号</el-button>
        </div>
      </template> -->

      <!-- <el-button type="primary" @click="changeValue">改变value</el-button> -->
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.userinfo {
  margin: 0 auto;
  max-width: 600px;
}
.qrcode {
  display: flex;
  justify-content: center;
}
</style>
